<template>
  <div class="odwrap">
    <licensees-header></licensees-header>
    <div class="odContainer">
      <div class="homewrap">
        <div class="lh-wrap">
          <div class="bebackprv">
            <input class="detailBackBtn" type="button" value="返回 授权码订单" @click="backSubmit">
          </div>
          <div class="detailTitle">
            <div class="detailTitle">订单详情</div>
            <div class="ordermunber">
              <p>订单号：<span>{{this.orddetail.order_code}}</span></p>
            </div>
          </div>
          <div class="ord-steps">
            <order-Types :steps="steps"></order-Types>
          </div>
          <div class="bootborder" v-if="this.steps.order_statusNo === 6">
            <div class="infoTitle">快递信息</div>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox">
                  {{this.orddetail.express_info_name}}  |  {{this.orddetail.express_info_no}}
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="bootborder" v-if="this.steps.order_statusNo !== 1 || this.steps.order_statusNo !== 8">
            <div class="infoTitle">取码说明</div>
            <el-row :gutter="10">
              <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                <div class="detailbox">
                  码包编号：{{this.orddetail.getcode_info1}}
                </div>
              </el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                <div class="detailbox">
                  取码数量：{{this.orddetail.getcode_info2}}
                </div>
              </el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                <div class="detailbox">
                  取码编号：{{this.orddetail.getcode_info3}}-{{this.orddetail.getcode_info4}}
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="bootborder">
            <div class="infoTitle">授权码信息</div>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox detailleft">
                  授权IP：
                </div>
                <div class="detailbox detailright">
                  {{this.orddetail.authcode_info_ip}}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox detailleft">
                  被授权商名称：
                </div>
                <div class="detailbox detailright">
                  {{this.orddetail.authcode_info_name}}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox detailleft">
                  授权编号：
                </div>
                <div class="detailbox detailright">
                  {{this.orddetail.authcode_info_cno}}
                </div>
                <button @click="showinfo" ref="showinfo" class="showInfo" value="显示详情">{{this.showinfoname}}</button>
              </el-col>
            </el-row>
            <div :class="{'detailShowInfo': this.isdetailShow}">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <div class="detailbox detailleft">
                    授权领域：
                  </div>
                  <div class="detailbox detailright">
                    {{this.orddetail.authcode_info_rangList}}
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <div class="detailbox detailleft">
                    授权类型：
                  </div>
                  <div class="detailbox detailright">
                    {{this.orddetail.authcode_info_owner_type}}
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <div class="detailbox detailleft">
                    授权区域：
                  </div>
                  <div class="detailbox detailright">
                    {{this.orddetail.authcode_info_quyu_type}}
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <div class="detailbox detailleft">
                    授权期限：
                  </div>
                  <div class="detailbox detailright">
                    {{this.orddetail.authcode_info_sqstart_date}}至{{this.orddetail.authcode_info_sqend_date}}
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <div class="detailbox detailleft">
                    授权金额：
                  </div>
                  <div class="detailbox detailright">
                    {{this.orddetail.authcode_info_paymoney}}
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <div class="detailbox detailleft">
                    备注：
                  </div>
                  <div class="detailbox detailright">
                    {{this.orddetail.authcode_info_beizhu}}
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox detailleft">
                  商品名称：
                </div>
                <div class="detailbox detailright">
                  {{this.orddetail.authcode_info_good_name}}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox detailleft">
                  授权码样式：
                </div>
                <div class="detailbox detailright">
                  <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                      <div class="detailStyleImgBox">
                        <div class="demo-image__preview">
                          <el-image
                            style="width: 109px; height: 109px"
                            :src="orddetail.authcode_info_codeStyleImgUrl"
                            :preview-src-list="orddetail.authcode_info_codeStyleImgUrlList">
                          </el-image>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox detailleft">
                  授权码定价：
                </div>
                <div class="detailbox detailright">
                  静态￥0.015
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox detailleft">
                  用码量：
                </div>
                <div class="detailbox detailright">
                  {{this.orddetail.authcode_info_codeCount}}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox detailleft">
                  码段：
                </div>
                <div class="detailbox detailright">
                  {{this.orddetail.authcode_info_code_segment}}
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="bootborder">
            <div class="infoTitle">收件信息</div>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="detailbox">
                  {{this.orddetail.receipt_info1}}&nbsp;&nbsp;{{this.orddetail.receipt_info2}}&nbsp;&nbsp;{{this.orddetail.receipt_info3}}
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="bootborder"  v-if="this.steps.order_statusNo !== 1 || this.steps.order_statusNo !== 8">
            <div class="infoTitle">支付信息</div>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="detailbox">
                  支付方式：{{this.orddetail.zhifu1}}
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="detailbox">
                  支付时间：{{this.orddetail.zhifu2}}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="detailbox">
                  支付金额：{{this.orddetail.zhifu3}}
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="detailbox">
                  支付凭证：
                  <a href="" target="_blank" class="clickLook">点击888888888888查看</a>
                </div>
              </el-col>
            </el-row>
          </div>

        </div>
      </div>
    </div>
    <base-footer></base-footer>
    <div class="background-div"></div>
  </div>
</template>

<script>
import request from '@/utils/request.js'
import LicenseesHeader from 'common/LicenseesHeader'
import orderTypes from './components/OrderSteps'
import BaseFooter from 'common/BaseFooter'
import YcItem from './components/YcItem'
export default {
  name: 'IpordDetail',
  components: {
    LicenseesHeader,
    orderTypes,
    BaseFooter,
    YcItem
  },
  data () {
    return {
      steps: {
        //  订单状态
        order_status: '',
        order_statusNo: 0,
        creatTime: '',
        payTime: '',
        makecodetime: '',
        printtime: '',
        exptime: ''
      },
      //  部分授权码详情隐藏或显示
      isdetailShow: true,
      orddetail: {
        //  订单编号
        order_code: '',
        //  *快递信息
        express_info_name: '',
        express_info_no: '',
        //  取码说明
        getcode_info1: '',
        getcode_info2: '',
        getcode_info3: '',
        getcode_info4: '',
        //  收件信息
        receipt_info1: '',
        receipt_info2: '',
        receipt_info3: '',
        //  授权码信息
        authcode_info_ip: '',
        authcode_info_name: '',
        authcode_info_cno: '',
        authcode_info_rangList: '',
        authcode_info_owner_type: '',
        authcode_info_quyu_type: '',
        authcode_info_sqstart_date: '',
        authcode_info_sqend_date: '',
        authcode_info_paymoney: '',
        authcode_info_beizhu: '',
        authcode_info_good_name: '',
        authcode_info_codeStyleImgUrl: '',
        authcode_info_codeStyleImgUrlList: [],
        authcode_info_codeCount: '',
        authcode_info_code_segment: '',
        //  支付信息
        zhifu1: '',
        zhifu2: '',
        zhifu3: ''
      },
      showinfoname: '显示详情'
    }
  },
  methods: {
    showinfo () {
      this.isdetailShow = !this.isdetailShow
      if (this.showinfoname === '显示详情') {
        this.showinfoname = '隐藏详情'
      } else {
        this.showinfoname = '显示详情'
      }
    },
    backSubmit () {
      this.$router.go(-1)
    },
    //  获取详情信息
    getOrderDetail (data) {
      request.orderDetail(data)
        .then((res) => {
          let odata = res.data
          //  订单号
          if (odata.map.orderCode === undefined) {
            this.orddetail.order_code = '--'
          } else {
            this.orddetail.order_code = odata.map.orderCode
          }
          //  订单状态
          if (odata.list[0].status === 1) {
            this.steps.order_status = '待付款'
            this.steps.creatTime = odata.list[0].createTime
          } else if (odata.list[0].status === 2) {
            this.steps.order_status = '待制码'
            this.steps.creatTime = odata.list[0].createTime
            this.steps.payTime = odata.list[0].payTime
          } else if (odata.list[0].status === 3) {
            this.steps.order_status = '制码中'
            this.steps.creatTime = odata.list[0].createTime
            this.steps.payTime = odata.list[0].payTime
            this.steps.makecodetime = odata.list[0].makecodetime2
          } else if (odata.list[0].status === 6) {
            this.steps.order_status = '已完成'
            this.steps.creatTime = odata.list[0].createTime
            this.steps.payTime = odata.list[0].payTime
            this.steps.makecodetime = odata.list[0].makecodetime2
            this.steps.printtime = odata.list[0].printtime2
            this.steps.exptime = odata.list[0].expTime
          } else if (odata.list[0].status === 8) {
            this.steps.order_status = '已取消'
            this.steps.creatTime = odata.list[0].createTime
          } else if (odata.list[0].status === 4 || odata.list[0].status === 5) {
            this.steps.order_status = '印刷中'
            this.steps.creatTime = odata.list[0].createTime
            this.steps.payTime = odata.list[0].payTime
            this.steps.makecodetime = odata.list[0].makecodetime2
            this.steps.printtime = odata.list[0].printtime2
          } else {
            this.steps.order_status = '状态异常'
          }
          this.steps.order_statusNo = odata.list[0].status
          //  快递信息
          if (odata.map.expName === undefined) {
            this.orddetail.express_info_name = '--'
          } else {
            this.orddetail.express_info_name = odata.map.expName
          }
          if (odata.map.expNo === undefined) {
            this.orddetail.express_info_no = '--'
          } else {
            this.orddetail.express_info_no = odata.map.expNo
          }
          //  取码说明
          if (odata.map.useCount === 0) {
            this.orddetail.getcode_info1 = odata.map.packageNum
            this.orddetail.getcode_info2 = odata.map.securityCodeCount
            this.orddetail.getcode_info3 = odata.map.startNumber
            this.orddetail.getcode_info4 = odata.map.endNumber
          } else if (odata.map.useCount === 1) {
            this.orddetail.getcode_info1 = odata.dataList[0].mabaobiaohao
            this.orddetail.getcode_info2 = odata.dataList[0].qumashuliang
            this.orddetail.getcode_info3 = odata.dataList[0].qumabianhao.split('-')[0]
            this.orddetail.getcode_info4 = odata.dataList[0].qumabianhao.split('-')[1]
          } else {
            this.orddetail.getcode_info1 = '异常'
            this.orddetail.getcode_info2 = '异常'
            this.orddetail.getcode_info3 = '异常'
            this.orddetail.getcode_info4 = '异常'
          }
          //  授权码信息
          if (odata.list[0].opus_name_list !== undefined) {
            this.orddetail.authcode_info_ip = this.ssTring(odata.list[0].opus_name_list)
          } else {
            this.authcode_info_ip = 'undefined'
          }
          if (odata.list[0].merchant_name !== undefined) {
            this.orddetail.authcode_info_name = odata.list[0].merchant_name
          } else {
            this.orddetail.authcode_info_name = 'undefined'
          }
          if (odata.list[0].cno !== undefined) {
            this.orddetail.authcode_info_cno = odata.list[0].cno
          } else {
            this.orddetail.authcode_info_cno = 'undefined'
          }
          if (odata.rangeList !== undefined) {
            this.orddetail.authcode_info_rangList = odata.rangeList
          } else {
            this.orddetail.authcode_info_rangList = 'undefined'
          }
          if (odata.list[0].owner_type !== undefined) {
            if (odata.list[0].owner_type === 1) {
              this.orddetail.authcode_info_owner_type = '独占许可使用'
            } else if (odata.list[0].owner_type === 2) {
              this.orddetail.authcode_info_owner_type = '排他许可使用'
            } else {
              this.orddetail.authcode_info_owner_type = '普通许可使用'
            }
          } else {
            this.orddetail.authcode_info_owner_type = 'undefined'
          }
          if (odata.list[0].qu_yu_type !== undefined) {
            if (odata.list[0].qu_yu_type === 1) {
              this.orddetail.authcode_info_quyu_type = '全球'
            } else if (odata.list[0].qu_yu_type === 4) {
              this.orddetail.authcode_info_quyu_type = '中国'
            } else {
              this.orddetail.authcode_info_quyu_type = '海外'
            }
          } else {
            this.orddetail.authcode_info_quyu_type = 'undefined'
          }
          if (odata.list[0].start_date !== undefined) {
            this.orddetail.authcode_info_sqstart_date = odata.list[0].start_date
          } else {
            this.orddetail.authcode_info_sqstart_date = 'undefined'
          }
          if (odata.list[0].end_date !== undefined) {
            this.orddetail.authcode_info_sqend_date = odata.list[0].end_date
          } else {
            this.orddetail.authcode_info_sqend_date = 'undefined'
          }
          if (odata.list[0].pay_money !== undefined) {
            this.orddetail.authcode_info_paymoney = odata.list[0].pay_money
          } else {
            this.orddetail.authcode_info_paymoney = 'undefined'
          }
          if (odata.rangeList !== undefined) {
            this.orddetail.authcode_info_beizhu = odata.rangeList
          } else {
            this.orddetail.authcode_info_beizhu = 'undefined'
          }
          if (odata.list[0].good_name !== undefined) {
            this.orddetail.authcode_info_good_name = odata.list[0].good_name
          } else {
            this.orddetail.authcode_info_good_name = 'undefined'
          }
          if (odata.filepath !== undefined) {
            this.orddetail.authcode_info_codeStyleImgUrl = odata.filepath + odata.list[0].code_style_image
            this.orddetail.authcode_info_codeStyleImgUrlList.push(odata.filepath + odata.list[0].code_style_image)
          } else {
            this.orddetail.authcode_info_codeStyleImgUrl = 'undefined'
          }
          if (odata.list[0].security_code_count !== undefined) {
            this.orddetail.authcode_info_codeCount = odata.list[0].security_code_count
          } else {
            this.orddetail.authcode_info_codeCount = 'undefined'
          }
          if (odata.list[0].code_segment !== undefined) {
            this.orddetail.authcode_info_code_segment = odata.list[0].code_segment
          } else {
            this.orddetail.authcode_info_code_segment = 'undefined'
          }
          //  收件信息receipt_info1
          if (odata.map.addrName !== undefined) {
            this.orddetail.receipt_info1 = odata.map.addrName
          } else {
            this.orddetail.receipt_info1 = 'undefined'
          }
          if (odata.map.addrPhone !== undefined) {
            this.orddetail.receipt_info2 = odata.map.addrPhone
          } else {
            this.orddetail.receipt_info2 = 'undefined'
          }
          if (odata.map.addrDetail !== undefined) {
            this.orddetail.receipt_info3 = odata.map.addrDetail
          } else {
            this.orddetail.receipt_info13 = 'undefined'
          }
          // 支付信息
          if (odata.map.payType !== undefined) {
            if (odata.map.payType === 1) {
              this.orddetail.zhifu1 = '支付宝支付'
            } else if (odata.map.payType === 2) {
              this.orddetail.zhifu1 = '微信支付'
            } else if (odata.map.payType === 3) {
              this.orddetail.zhifu1 = '银行转账'
            } else {
              this.orddetail.zhifu1 = '余量支付'
            }
          } else {
            this.orddetail.zhifu1 = 'undefined'
          }
          if (odata.map.createTime !== undefined) {
            this.orddetail.zhifu2 = odata.map.createTime
          } else {
            this.orddetail.zhifu2 = 'undefined'
          }
          if (odata.map.totalAmount !== undefined) {
            this.orddetail.zhifu3 = odata.map.totalAmount
          } else {
            this.orddetail.zhifu3 = 'undefined'
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    ssTring (str) {
      if (!str) {
        return 'undefined'
      } else {
        let strs = []
        strs = str.split(',').filter(function (s) {
          //  注：IE9(不包含IE9)以下的版本没有trim()方法
          return s && s.trim()
        })
        let newStr = strs.join()
        let nstr
        if (newStr.indexOf('/1') !== -1) {
          nstr = newStr.replace(/\/1/g, '')
        }
        if (newStr.indexOf('/2') !== -1) {
          nstr = newStr.replace(/\/2/g, '')
        }
        return nstr
      }
    }
  },
  mounted () {
    this.getOrderDetail(this.$route.params.id)
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.detailShowInfo
  display none
.detailbox
  line-height 34px
  font-size 14px
  color #333333
  float left
  .clickLook
    text-decoration none
    color $baseColor
.detailleft
  width 100px
.detailright
  max-width 1000px
  line-height 24px
  padding 6px 0
.bootborder
  border-top solid 1px $boxborder
  min-height 1px
  padding-bottom 20px
.infoTitle
  line-height 40px
  color #333
  font-size 18px
  padding-top 20px
.detailTitle
  line-height 36px
  font-size 24px
  color #333
  margin 10px 0 18px
.odwrap
  width: 100%;
  min-height: 100%;
  background-color: $bgTabCont;
  padding-top: 70px;
.odContainer
  width 1180px
  margin 0 auto
.detailStyleImgBox
  width: 125px
  height: 125px
  padding: 7px
  margin: 0 19px 19px 0
  border: 1px solid #efefef
  border-radius: 4px
  float: left
  position: relative
.background-div
  background-color $bgTabCont
  position fixed
  z-index -1000
  width 100%
  height 99999px
.homewrap
  margin-top 30px
  .showInfo
    background-color: #fff;
    outline: none;
    width: 80px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 14px;
    color: #333;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    margin-left: 20px;
    margin-top: 6px;
    cursor: pointer;
    float left
  .lh-wrap
    min-width 960px
    box-sizing border-box
    background-color #fff
    padding 30px
    .ord-steps
      padding 0 0 50px 0
      &::after
        content ''
        clear both
        display block
  .label-wrp
    display flex
    >label
      width 120px
    .labe-img
      width 20%
      display inline-block
      border-radius 4px
      padding 6px
      border solid 1px $boxborder
.bebackprv
  .detailBackBtn
    background-color #fff
    width 120px
    height 36px
    line-height 36px
    text-align center
    font-size 14px
    color #333
    border-radius 4px
    box-sizing border-box
    border 1px solid #ddd
    outline none
    cursor pointer
.detailTitle
  line-height 36px
  font-size 24px
  color #333333
  margin 10px 0 18px
  .ordermunber
    font-size 14px
.detailCont
  overflow hidden
  .detailLeftTitle
    line-height 36px
    width 100px
    font-size 14px
    font-weight 500
    color #333
    float left
  .detailRightCont
    white-space normal
    word-break break-all
    line-height 36px
    min-width 795px
    max-width 88.33%
    font-size 14px
    color #333
    float left
</style>
